<template>
    <!-- 景点详情页 -->
    <div>
    <div>
      <div>
        <img :src="picture" alt=""
        />
      </div>
      <div class="xiangqing">
        <h1>{{title}}</h1>
        <p>{{detail}}</p>
      </div>
    </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      title:'',
            detail:'',
        picture:'',
    }
  },
  methods: {
  },
  mounted() {
      let params=this.$route.params.qid
      this.$http.jdApi.qidSpot(params).then((res) => {
        console.log(res);
        this.jdxq=res.data.data[0]
        this.detail=res.data.data[0].detail
        this.title=res.data.data[0].title
        this.picture=res.data.data[0].picture
      })
  },
}
</script>

<style lang="scss" scoped>
.xiangqing {
  p {
    text-indent: 2em;
  }
  h1{
    text-align: center;
  }
  position: fixed;
  left: 50%;
  right: 50px;
  top: 20%;
  padding-left: 70px;
  padding-right: 70px;
  padding-bottom: 70px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.6);
}
img {
  background-size: cover;
  color: #333;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: auto;
}
</style>
